<ion-content>
    <ion-icon *ngIf="switchRoutes" (click)="switchRoutes = !switchRoutes"
              style="position: absolute;top:50px;left: 20px;font-size: 24px;width: 24px;height: 24px;" name="close">
    </ion-icon>

    <ion-card style="margin-top: 25%;padding-bottom: 30px;">
        <ion-card-header>
            <ion-card-header>
                <ion-card-title style="text-align: center" *ngIf="!switchRoutes">
                    <span *ngIf="onOrOffLine === 'offLine'">离线</span>登录
                </ion-card-title>
                <ion-card-title style="text-align: center" *ngIf="switchRoutes">
                    服务器配置
                </ion-card-title>
            </ion-card-header>
        </ion-card-header>
        <ion-card-content>
            <!--用户名密码登录-->
            <ion-item *ngIf="loginMethod==0 && !switchRoutes" style="padding:0 25px 0 10px">
                <ion-input type="text" placeholder="输入用户名" [(ngModel)]="username"></ion-input>
            </ion-item>
            <ion-item *ngIf="loginMethod==0 && !switchRoutes" style="padding:0 25px 0 10px">
                <ion-input type="password" placeholder="输入密码" [clearInput]="true" [(ngModel)]="password"></ion-input>
            </ion-item>
            <div style="line-height: 40px;padding: 10px 29px;" *ngIf="!switchRoutes">
                <ion-checkbox style="display: inline-block;vertical-align: middle;" [(ngModel)]="memory"
                              [checked]="memory" (ionChange)="changeMemoryState(memory)"></ion-checkbox>
                <div style="display: inline-block;padding-left: 10px;">记住用户名和密码</div>
            </div>


            <!--手机验证码登录-->
            <!--            <ion-item *ngIf="loginMethod==1" style="padding:0 25px 0 10px">-->
            <!--                <ion-label>+86</ion-label>-->
            <!--                <ion-input placeholder="输入手机号" [type]="'tel'" [maxlength]="11" [clearInput]="true"></ion-input>-->
            <!--            </ion-item>-->
            <!--            <ion-item *ngIf="loginMethod==1" style="padding:0 25px 0 10px">-->
            <!--                <ion-input placeholder="输入验证码" [type]="'tel'" [maxlength]="6"></ion-input>-->
            <!--                <ion-button fill="outline" slot="end">获取验证码</ion-button>-->
            <!--            </ion-item>-->

            <!--服务器配置-->
            <ion-item *ngIf="switchRoutes" style="padding:0 25px 0 10px">
                <ion-label>后端IP:</ion-label>
                <ion-input class="textalign" placeholder="输入IP" [type]="'url'" pattern="url" [(ngModel)]="serverIp"
                           [clearInput]="true"></ion-input>
            </ion-item>
            <ion-item *ngIf="switchRoutes" style="padding:0 25px 0 10px">
                <ion-label>后端PORT:</ion-label>
                <ion-input class="textalign" placeholder="输入PORT" [type]="'tel'" [(ngModel)]="serverPort"
                           [clearInput]="true"></ion-input>
            </ion-item>
            <ion-item *ngIf="switchRoutes" style="padding:0 25px 0 10px">
                <ion-label>文件IP:</ion-label>
                <ion-input class="textalign" placeholder="输入文件IP" [type]="'url'" pattern="url"
                           [(ngModel)]="fileServerIp"
                           [clearInput]="true"></ion-input>
            </ion-item>
            <ion-item *ngIf="switchRoutes" style="padding:0 25px 0 10px">
                <ion-label>文件PORT:</ion-label>
                <ion-input class="textalign" placeholder="输入文件PORT" [type]="'tel'" [(ngModel)]="fileServerPort"
                           [clearInput]="true"></ion-input>
            </ion-item>
            <div style="line-height: 40px;padding: 10px 29px;" *ngIf="switchRoutes">
                <ion-checkbox style="display: inline-block;vertical-align: middle;" [checked]="memoryServerConfig"
                              [(ngModel)]="memoryServerConfig"
                              (ionChange)="memoryServerConfigChange(memoryServerConfig)"
                ></ion-checkbox>
                <div style="display: inline-block;padding-left: 10px;">记住配置信息</div>
            </div>


            <div style=" margin-top: 20px;padding:0 20px">
                <ion-button *ngIf="!switchRoutes" expand="block" (click)="login2(onOrOffLine)">登录
                </ion-button>
                <ion-button *ngIf="switchRoutes" expand="block" (click)="serverConfig()">确定
                </ion-button>
            </div>
            <div *ngIf="!switchRoutes" style=" margin: 20px 5px;padding:0 20px;">
                <div style="width: 50%;display: inline-block;text-align: start;">
                     <span (click)="switchRoutes = true">配置服务器
                </span>
                </div>
                <div style="width: 50%;display: inline-block;text-align: end;">
                        <span *ngIf="onOrOffLine === 'onLine'" (click)="onOrOffLine = 'offLine'">离线登录
                </span>
                    <span *ngIf="onOrOffLine === 'offLine'" (click)="onOrOffLine = 'onLine'">在线登录
                </span>
                </div>
            </div>

        </ion-card-content>
    </ion-card>
    <!--  <div style="bottom: 20px; width: 100%;text-align: center;">-->
    <!--    <a *ngIf="loginMethod==0" (click)="loginMethod=1">手机验证码登录</a>-->
    <!--    <a *ngIf="loginMethod==1" (click)="loginMethod=0">用户名密码登录</a>-->
    <!--  </div>-->
</ion-content>
